<template>
  <div class="top">
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2270425215&site=qq&menu=yes">
      <div class="top-add">
        <img  class="top-top-img" src="/static/img/kefu.png">
      </div>
    </a>
    <div class="top-top" v-show="!isTop" :style="opacityStyle" @click="goTop">
      <img class="top-top-img" src="/static/img/icon-topw.png">
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublicMenu',
  data () {
    return {
      isTop: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      const top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
        this.isTop = false
      } else {
        this.isTop = true
      }
    },
    goTop () {
      this.timer = setInterval(() => {
        let osTop = document.documentElement.scrollTop || document.body.scrollTop
        let ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
        this.isTop = true
        if (osTop === 0) {
          clearInterval(this.timer)
        }
      }, 30)
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
  .top
    position: fixed
    bottom: 0.6rem
    right: .2rem
    zoom: 1
    z-index: 4000
    font-size: 0
    .top-add
    .top-top
      bottom: .6rem
      width: .7rem
      height: .7rem
      background-color: rgba(0, 0, 0, 0.6)
      border-radius: 50%
      position: absolute
      bottom: 1.5rem
      right: 0
      .top-top-img
        width: .44rem
        height: .44rem
        margin: .12rem 0 0 .13rem
    .top-top
      bottom: .6rem
</style>
